<template>
	<view class="structure-panel" v-if="companyId">
		<up-loading-page :loading="loading">
		</up-loading-page>
		<up-cell-group>
			<up-cell :title-style="{ color: '#2b85e4' }" :icon-style="{ color: '#2b85e4' }" icon="more-dot-fill"
				title="返回" @tap="previousLevel" v-if="hasPrevious"></up-cell>
			<up-cell :title-style="{ color: '#2b85e4', fontWeight: 'bold', fontSize: '30rpx' }" is-link
				:icon-style="{ marginRight:'10px' }" :title="item.label" v-for="item in showList" :key="item.id"
				@tap="structureClick(item)">
				<template #icon>
					<up-icon v-if="showSub" size="20" name="minus-circle"></up-icon>
				</template>
			</up-cell>
			<up-cell v-for="staff in staffList" :key="staff.id" :title="staff.nickName"
				:title-style="{ fontWeight: 'bold', fontSize: '30rpx', marginLeft: '10rpx' }">
				<template #icon>
					<up-avatar :text="staff.nickName[0] || ''" bg-color="#2b85e4"></up-avatar>
				</template>
			</up-cell>
			<up-cell @tap="showSub = !showSub" :title-style="{ color: '#2b85e4' }" :icon-style="{ color: '#2b85e4' }"
				:title="showSub && '取消删除' || '删除'" v-if="hasPrevious"></up-cell>
			<up-cell @tap="showCreate = !showCreate" :title-style="{ color: '#2b85e4' }"
				:icon-style="{ color: '#2b85e4' }" icon="plus-circle" title="新建组织架构" v-if="hasPrevious"></up-cell>
		</up-cell-group>
		<up-modal :show="showCreate" title="请填写组织名" @confirm="submit" show-cancel-button @cancel="showCreate = false">
			<up-input v-model="structureName" />
		</up-modal>
	</view>
</template>

<script>
	export default {
		props: {
			companyId: {
				type: Number,
				default: null
			}
		},
		data() {
			return {
				structureList: [],
				showList: [],
				currentLevel: [],
				staffList: [],
				loading: false,
				isAdmin: false,
				showCreate: false,
				showSub: false,
				// 新增结构名
				structureName: null,
				parentId: null
			}
		},
		mounted() {
			this.getData()
			this.$http({
				url: '/company/staff/isAdmin',
				method: "GET",
				data: {
					companyId: this.companyId
				}
			}).then(res => {
				this.isAdmin = res
			})
		},
		computed: {
			hasPrevious() {
				return this.currentLevel.length > 1
			}
		},
		methods: {
			submit() {
				this.$http({
					url: "/company/structure/add",
					method: "POST",
					data: {
						companyId: this.companyId,
						parentId: this.parentId,
						structureName: this.structureName
					}
				}).then(res => {
					this.showCreate = false
					this.structureName = null
					this.addNode(this.parentId, res)
				})
			},
			getData() {
				this.structureList = []
				this.showList = []
				this.currentLevel = []
				this.staffList = []
				this.loading = true
				this.$http({
					url: "/company/structure/tree?companyId=" + this.companyId,
					method: "get",
				}).then(res => {
					this.structureList = res
					this.showList = res
					this.currentLevel.push(res)
					this.loading = false
				})
			},
			previousLevel() {
				if (this.currentLevel.length > 1) {
					this.currentLevel.pop()
					this.showList = this.currentLevel[this.currentLevel.length - 1]
					this.parentId = this.showList[0] && this.showList[0].parentId || null
					this.getStaff(this.parentId)
				}
			},
			structureClick(item) {
				if (this.showSub) {
					const self = this
					uni.showModal({
						title: '提示',
						content: '确认删除 ' + item.label + "吗？删除后不可恢复",
						success: function(res) {
							if (res.confirm) {
								self.$http({
									url: "/company/structure/delete/" + item.id,
									method: "DELETE",
								}).then(res => {
									self.deleteNode(item.id)
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else {
					this.currentLevel.push(item.children)
					this.showList = item.children
					this.getStaff(item.id)
					this.parentId = item.id || null
				}
			},
			addNode(parentId, newNode) {
				const addNodeRecursive = (nodes) => {
					for (let node of nodes) {
						if (node.id === parentId) {
							node.children = node.children || [];
							node.children.push(newNode);
							return true;
						} else if (node.children && node.children.length > 0) {
							if (addNodeRecursive(node.children)) {
								return true;
							}
						}
					}
					return false;
				};

				addNodeRecursive(this.structureList);
			},
			deleteNode(nodeId) {
				const deleteNodeRecursive = (nodes) => {
					for (let i = 0; i < nodes.length; i++) {
						if (nodes[i].id === nodeId) {
							nodes.splice(i, 1);
							return true;
						} else if (nodes[i].children && nodes[i].children.length > 0) {
							if (deleteNodeRecursive(nodes[i].children)) {
								return true;
							}
						}
					}
					return false;
				};

				deleteNodeRecursive(this.structureList);
			},
			getStaff(levelId) {
				this.loading = true
				if (levelId == null) {
					this.staffList = []
					this.loading = false
				} else {
					this.$http({
						url: "/company/structure/user?id=" + levelId,
						method: "get",
					}).then(res => {
						this.staffList = res
						this.loading = false
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.user-panel {
		display: flex;
		flex-direction: column;

		.user-item {
			display: flex;
			align-items: center;
			gap: 20rpx;
			padding: 13px 15px;

			.nick-name {
				font-size: 30rpx;
				font-weight: bold;
			}
		}
	}
</style>